<template>
  <div style="display: flex;justify-content: space-between;">
    <div>
      <a-input-search v-model="names" class="mg_r24" allow-clear placeholder="搜索员工" style="width: 200px" @search="onSearch" />

      <a-button class="mg_l24" type="primary" @click="reload">清空</a-button>
    </div>
    <a-button v-if="isShow !== false" type="primary" @click="payslip">
      发放工资条
    </a-button>
  </div>
</template>

<script>
import { getDepartmentInTree } from "@/api/department/department";

export default {
  name: "Search",

  props: {
    isShow: {
      type: Boolean,
      default: () => {
        false;
      }
    },
    name: {
      type: String,
      default: () => {}
    },
    dep: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      names: this.name,
      deps: this.dep,
      treeData: []
    };
  },

  created() {
    this.getDep();
  },

  methods: {
    payslip() {
      this.$emit("payslipOk", { name: undefined, dep: undefined });
    },
    // 刷新
    reload() {
      this.names = undefined;
      this.deps = undefined;
      this.$emit("change", { name: undefined, dep: undefined });
    },
    // 搜索员工
    onSearch(e) {
      this.$emit("change", { name: this.names, dep: this.deps });
      this.$emit("input", { name: this.names, dep: this.deps });
    },

    // 选择部门
    handleChange(e) {
      this.$emit("change", { name: this.names, dep: this.deps });
    },
    // 获取部门
    getDep() {
      getDepartmentInTree({ companyId: this.$store.state.hr.companyId }).then(({ data }) => {
        const child = data[0].depChildList || [];
        this.treeData = this.deep(child);
      });
    },
    deep(data) {
      data.forEach(key => {
        key.key = key.id;
        key.value = key.id;
        key.title = key.name;
        key.children = key.depChildList;
        if (key.depChildList) {
          this.deep(key.depChildList);
        }
      });
      return data;
    }
  }
};
</script>
